<template>
	<view class="container">
		<!-- 俱乐部信息 -->
		<view class="club-info">
			<image class="club-avatar" :src="activityInfo.coverImage" mode="aspectFill"></image>
			<view class="club-detail">
				<text class="club-name">球队：{{activityInfo.homeTeam.name}} </text>
				<text class="club-stats">成员 {{activityInfo.homeTeam.memberCount}} </text>
				<text class="club-stats">活动 {{activityInfo.homeTeam.activityCount}} </text>
				<text class="club-stats">动态 0</text>
			</view>
		</view>

		<!-- 活动信息列表 -->
		<view class="info-list">
			<!-- 活动标题 -->
			<view class="info-item">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/title.png" mode="aspectFit"></image>
				</view>
				<text class="info-text">标题：{{activityInfo.title}}</text>
			</view>
			<!-- 时间信息 -->
			<view class="info-item">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/calendar.png" mode="aspectFit"></image>
				</view>
				<text class="info-text">活动时间：{{activityInfo.activityTime}}</text>
				<!-- <text class="view-count">{{activityInfo.viewCount}}</text> -->
				<view class="view-info">
					<image class="view-icon" src="/static/icons/eye.png" mode="aspectFit"></image>
					<text class="view-count">{{activityInfo.viewCount}}</text>
				</view>
			</view>

			<!-- 地点信息 -->
			<view class="info-item">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/location.png" mode="aspectFit"></image>
				</view>
				<view class="location-info" @tap="openLocation">
					<text class="label">场地：</text>
					<text class="value">{{activityInfo.location}}</text>
					<view class="nav-guide">
						<image class="nav-icon" src="/static/icons/nav.png" mode="aspectFit"></image>
						<text class="nav-text">场地导航</text>
						<text class="nav-arrow">›</text>
					</view>
				</view>
			</view>

			<!-- 运动类型 -->
			<view class="info-item">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/sport.png" mode="aspectFit"></image>
				</view>
				<text class="info-text">赛事类型/是否公开：{{sportTypeText}}/{{visibilityText}}</text>
			</view>

			<!-- 收费信息 -->
			<view class="info-item">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/money.png" mode="aspectFit"></image>
				</view>
				<text class="info-text">收费：{{feeTypeText}}</text>
				<text class="fee-status">{{feeTypeText === '免费活动' ? '未开启':'已开启'}}</text>
			</view>

			<!-- 评论入口 -->
			<view class="info-item" @tap="goToCommentList">
				<view class="icon-wrap">
					<image class="icon" src="/static/icons/comment.png" mode="aspectFit"></image>
				</view>
				<text class="info-text">活动评论：{{activityInfo.commentCount}}</text>
				<text class="arrow">›</text>
			</view>
		</view>

		<!-- 发起人信息 -->
		<view class="organizer-info" @tap="goToProfile(activityInfo.sysUser.userId)">
			<image class="organizer-avatar" :src="activityInfo.sysUser.avatar||'/static/avatars/default-avatar.jpg'"
				mode="aspectFill"></image>
			<view class="organizer-detail">
				<text class="organizer-name">发起人：{{activityInfo.sysUser.nickName}}</text>
				<view class="phone-wrapper">
					<text class="organizer-name">电话：{{activityInfo.sysUser.phonenumber}}</text>
					<view class="call-btn" @tap.stop="makePhoneCall(activityInfo.sysUser.phonenumber)">
						<image class="call-icon" src="/static/icons/phone.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="rating">
					<block v-for="(item, index) in starList" :key="index">
						<image class="star"
							:src="item.type === 'filled' ? '/static/icons/star-filled.png' : '/static/icons/star-empty.png'"
							mode="aspectFit">
						</image>
					</block>
				</view>
			</view>
		</view>

		<!-- 活动描述 -->
		<view class="activity-desc">
			<text class="tag">活动公告</text>
			<text class="desc-text">{{activityInfo.notice}}</text>
		</view>

		<!-- 报名状态 -->
		<view class="register-status" @tap="goToSignupList">
			<view class="status-info">
				<text class="status-text">报名 {{approvedCount}}/{{activityInfo.maxPeople || 100}}</text>
				<text class="status-divider">|</text>
				<text class="status-text">待定 {{pendingCount}}</text>
				<text class="status-divider">|</text>
				<text class="status-text">请假 {{cancelledCount}}</text>
			</view>
			<text class="arrow-right">›</text>
		</view>

		<!-- 成员列表区域 -->
		<view class="members-section">
			<view class="section-header" @tap="toggleMembers">
				<text class="title">活动成员</text>
				<text class="arrow" :class="{ 'expanded': showMembers }">›</text>
			</view>
			<view class="section-content" v-show="showMembers">
				<!-- 已报名人员 -->
				<view class="member-group" v-if="approvedMembers.length > 0">
					<view class="group-title">已报名 ({{approvedMembers.length}}人)</view>
					<view class="member-list">
						<view class="member-item" v-for="(member, index) in approvedMembers" :key="index"
							@tap="goToProfile(member.userId)">
							<image class="member-avatar" :src="member.avatar || '/static/avatars/default-avatar.jpg'"
								mode="aspectFill"></image>
							<text class="member-name">{{member.nickname}}</text>
						</view>
					</view>
				</view>

				<!-- 待定人员 -->
				<view class="member-group" v-if="pendingMembers.length > 0">
					<view class="group-title">待定 ({{pendingMembers.length}}人)</view>
					<view class="member-list">
						<view class="member-item" v-for="(member, index) in pendingMembers" :key="index"
							@tap="goToProfile(member.userId)">
							<image class="member-avatar" :src="member.avatar || '/static/avatars/default-avatar.jpg'"
								mode="aspectFill"></image>
							<text class="member-name">{{member.nickname}}</text>
						</view>
					</view>
				</view>

				<!-- 请假人员 -->
				<view class="member-group" v-if="cancelledMembers.length > 0">
					<view class="group-title">请假 ({{cancelledMembers.length}}人)</view>
					<view class="member-list">
						<view class="member-item" v-for="(member, index) in cancelledMembers" :key="index"
							@tap="goToProfile(member.userId)">
							<image class="member-avatar" :src="member.avatar || '/static/avatars/default-avatar.jpg'"
								mode="aspectFill"></image>
							<text class="member-name">{{member.nickname}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 添加底部占位，避免被底部工具栏遮挡 -->
		<view class="bottom-placeholder"></view>

		<!-- 底部工具栏 -->
		<view class="bottom-toolbar">
			<view class="price-btn">
				<text class="price-symbol">¥0</text>
			</view>
			<view class="leave-btn" v-if="activityInfo.allowPending" @tap="handleLeave('pending')">
				<text>待定</text>
			</view>
			<view v-if="isMember" class="leave-btn" @tap="handleLeave('cancelled')">
				<text>请假</text>
			</view>
			<!-- {{isSignedUpApproved}} {{isSignedUp}} -->
			<view v-if="isSignedUpApproved" class="register-btn">
				<text>{{ '您已报名'}}</text>
			</view>
			<view v-else class="register-btn" :class="{ 'registered': isRegistered }" @tap="handleRegister">
				<text>{{ !isSignedUpApproved && isSignedUp ? '申请已发送' : '申请报名' }}</text>
			</view>
		</view>

		<!-- 浮动按钮组 -->
		<view class="float-buttons">
			<!-- 如果是活动发布者，显示管理和分享按钮 -->
			<template v-if="isCreator">
				<view class="float-btn-wrapper">
					<view class="float-btn" @tap="showManagePopup">
						<image class="btn-icon" src="/static/icons/manage.png"></image>
						<text class="float-text">管理</text>
					</view>
				</view>
				<view class="float-btn-wrapper">
					<view class="float-btn" @tap="handleShare">
						<image class="btn-icon" src="/static/icons/share.png"></image>
						<text class="float-text">分享</text>
					</view>
				</view>
			</template>
			<!-- 如果不是发布者，显示客服分享按钮 -->
			<template v-else>
				<view class="float-btn-wrapper">
					<view class="float-btn" @tap="handleService">
						<text class="btn-icon">㊂</text>
						<text class="float-text">客服</text>
					</view>
				</view>
				<view class="float-btn-wrapper">
					<view class="float-btn" @tap="handleShare">
						<text class="btn-icon">⇋</text>
						<text class="float-text">分享</text>
					</view>
				</view>
			</template>
		</view>

		<!-- 底部提示 -->
		<view class="bottom-tip">
			<text class="tip-text">关注「菌子好球」服务号，接收活动变更消息！</text>
			<text class="follow-btn">马上关注</text>
		</view>

		<!-- 使用原生 modal 组件 -->
		<view class="custom-modal" v-if="showModal">
			<view class="modal-mask" @tap="handleClose"></view>
			<view class="modal-content">
				<view class="modal-title">申请已发送</view>
				<view class="modal-body">
					关注「菌子好球」公众号，及时接收申请通过提醒。
				</view>
				<view class="modal-footer">
					<view class="modal-btn cancel" @tap="handleClose">取消</view>
					<view class="modal-btn confirm" @tap="handleConfirm">前去关注</view>
				</view>
			</view>
		</view>
		<!-- 管理弹出框 -->
		<view class="manage-modal" v-if="showManageSheet">
			<view class="modal-mask" @tap="closeManagePopup"></view>
			<view class="manage-content">
				<view class="manage-list">
					<view class="manage-item" @tap="handleManageAction(0)">
						<image class="item-icon" src="/static/icons/edit.png"></image>
						<text class="item-text">编辑活动</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(1)">
						<image class="item-icon" src="/static/icons/vs.png"></image>
						<text class="item-text">开启约赛</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(2)">
						<image class="item-icon" src="/static/icons/team.png"></image>
						<text class="item-text">分队</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(3)">
						<image class="item-icon" src="/static/icons/service.png"></image>
						<text class="item-text">联系客服</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(4)">
						<image class="item-icon" src="/static/icons/board.png"></image>
						<text class="item-text">战术板</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(5)">
						<image class="item-icon" src="/static/icons/cancel.png"></image>
						<text class="item-text">取消活动</text>
					</view>
					<view class="manage-item" @tap="handleManageAction(6)">
						<image class="item-icon" src="/static/icons/approve.png"></image>
						<text class="item-text">报名审批</text>
					</view>
				</view>
				<view class="manage-cancel" @tap="closeManagePopup">取消</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		getActivity,
		listSportType,
		registerActivity,
		delActivity
	} from '@/api/youqiu/activity.js'

	import {
		addSignups
	} from '@/api/youqiu/signups.js'
	import uniPopup from '@dcloudio/uni-ui/lib/uni-popup/uni-popup'

	export default {
		data() {
			return {
				activityId: '',
				activityInfo: {},
				sportTypeMap: {},
				feeTypeMap: {},
				showModal: false,
				isCreator: false, // 是否是活动发布者
				showManageSheet: false, // 改为默认不显示
				manageActions: [{
						name: '编辑活动',
						icon: '/static/icons/edit.png'
					},
					{
						name: '取消活动',
						icon: '/static/icons/cancel.png'
					},
					{
						name: '审核报名',
						icon: '/static/icons/review.png'
					}
				],
				starList: [{
						type: 'filled'
					},
					{
						type: 'filled'
					},
					{
						type: 'filled'
					},
					{
						type: 'empty'
					},
					{
						type: 'empty'
					}
				],
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					activityId: ''
				},
				showMembers: false,
				showComments: false
			}
		},
		onLoad(options) {
			this.getdics()
			if (options.id) {
				this.activityId = options.id
				this.getActivityDetails()
			}
			// 获取用户信息
			const storage_data = uni.getStorageSync('storage_data')
			if (storage_data && storage_data.vuex_user_info) {
				this.userInfo = storage_data.vuex_user_info
			}
			if (options.id) {
				this.queryParams.activityId = options.id
			}
		},
		computed: {
			// 判断是否已报名
			isSignedUp() {
				console.log('isSignedUp', this.activityInfo)
				if (!this.activityInfo.signupUserVoList || !this.userInfo) return false

				return this.activityInfo.signupUserVoList.some(signup =>
					signup.userId === this.userInfo.userId
				)
			},
			// 判断是否已报名是否已审批通过
			isSignedUpApproved() {
				console.log('isSignedUpApproved', this.activityInfo)
				if (!this.activityInfo.signupUserVoList || !this.userInfo) return false

				return this.activityInfo.signupUserVoList.some(signup =>
					signup.status === "approved" &&
					signup.userId === this.userInfo.userId
				)
			},
			// 判断是否是球队成员
			isMember() {
				if (!this.activityInfo?.homeTeam?.teamMembers || this.activityInfo.homeTeam.teamMembers.length === 0 || !
					this.userInfo) return false

				let isMember = this.activityInfo.homeTeam.teamMembers.some(member =>
					member.userId === this.userInfo.userId
				)
				console.log('isMember', isMember)
				return isMember
			},
			sportTypeText() {
				if (!this.activityInfo.sportType) return '--'
				return this.sportTypeMap.get(String(this.activityInfo.sportType)) || '--'
			},
			feeTypeText() {
				if (!this.activityInfo.feeType) return '--'
				return this.feeTypeMap.get(String(this.activityInfo.feeType)) || '--'
			},
			visibilityText() {
				if (this.activityInfo.isPrivate === undefined) return '--'
				return this.activityInfo.isPrivate === 0 ? '私密' : '全平台可见'
			},
			approvedCount() {
				if (!this.activityInfo.signupUserVoList) return 0
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'approved').length
			},
			pendingCount() {
				if (!this.activityInfo.signupUserVoList) return 0
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'pending').length
			},
			cancelledCount() {
				if (!this.activityInfo.signupUserVoList) return 0
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'cancelled').length
			},
			isFull() {
				return this.approvedCount >= (this.activityInfo.maxPeople || 100)
			},
			// 添加人员分组计算属性
			approvedMembers() {
				if (!this.activityInfo.signupUserVoList) return []
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'approved')
			},
			pendingMembers() {
				if (!this.activityInfo.signupUserVoList) return []
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'pending')
			},
			cancelledMembers() {
				if (!this.activityInfo.signupUserVoList) return []
				return this.activityInfo.signupUserVoList.filter(item => item.status === 'cancelled')
			}
		},
		methods: {
			getdics() {
				listSportType('sys_sport_type').then(res => {
					this.sportTypes = res.data
					// 构建 sportTypeMap
					this.sportTypeMap = new Map(
						res.data.map(item => [String(item.dictValue), item.dictLabel])
					)
				})

				listSportType('sys_fee_type').then(res => {
					const feeTypes = res.data

					// 确保使用字符串作为键
					this.feeTypeMap = new Map(
						feeTypes.map(item => [String(item.dictValue), item.dictLabel])
					)
					console.log('feeTypeMap after init:', this.feeTypeMap)
				})
			},
			getActivityDetails() {
				// TODO: 获取活动详情
				console.log('获取活动详情:', this.activityId)
				getActivity(this.activityId).then(res => {
					console.log('getActivityDetails', res)
					this.activityInfo = res.data
					this.checkIsCreator()
				})
			},
			handleService() {
				// 复制微信号到剪贴板
				uni.setClipboardData({
					data: 'yudg8888', // 替换成你的客服微
					success: () => {
						uni.showModal({
							title: '客服微信号已复制',
							content: '微信号：yudg8888\n请打开微信添加客服',
							confirmText: '去添加',
							success: (res) => {
								if (res.confirm) {
									// 打开微信
									uni.openSystemApp({
										appId: 'wxec8abf2d2113ade2',
										fail: () => {
											uni.showToast({
												title: '请手动打开微信添加',
												icon: 'none'
											})
										}
									})
								}
							}
						})
					},
					fail: () => {
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none'
						})
					}
				})
			},
			handleShare() {
				this.$modal.showToast('请点击右上角三个点分享活动报名')
			},
			handleLeave(status) {
				// 调用报名接口，状态为请假、待定
				addSignups({
					activityId: this.activityId,
					status: status // 请假或待定
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'success'
					})
					// 新整个页面数据
					this.refreshPage()
				}).catch(err => {
					uni.showToast({
						title: err.message || '操作失败',
						icon: 'none'
					})
				})
			},
			handleRegister() {
				if (!this.isSignedUpApproved && this.isSignedUp) {
					uni.showToast({
						title: '您的申请已发送请勿重复申请',
						icon: 'none'
					})
					return
				}
				if (this.isFull) {
					uni.showToast({
						title: '活动已满员',
						icon: 'none'
					})
					return
				}

				// 调用报名接口
				addSignups({
					activityId: this.activityId,
					status: 'approving' // 确保这里的状态值正确
				}).then(res => {
					// 显示确认弹窗
					this.showModal = true
					// 刷新整个面数据
					this.refreshPage()
				}).catch(err => {
					uni.showToast({
						title: err.message || '报名失败',
						icon: 'none'
					})
				})
			},
			handleConfirm() {
				this.showModal = false
				// TODO: 跳转到关注公众号页面或其他相关操作
			},
			handleClose() {
				this.showModal = false
			},
			// 添加刷新页面方法
			refreshPage() {
				// 重新获取活动详情
				this.getActivityDetails()
				// 重新取典数据
				this.getdics()
			},
			// 修改跳转方法，递报名列表数据
			goToSignupList() {

				uni.navigateTo({
					url: `/pages/activity/signup-list?id=${this.activityId}&mode=detail&createUserId=${this.activityInfo.sysUser.userId}`,
					fail: (err) => {
						console.error('页面跳转失败:', err)
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						})
					}
				})
			},
			// 打开地图导航
			openLocation() {
				if (!this.activityInfo.latitude || !this.activityInfo.longitude) {
					uni.showToast({
						title: '暂无位置息',
						icon: 'none'
					});
					return;
				}

				uni.openLocation({
					latitude: Number(this.activityInfo.latitude),
					longitude: Number(this.activityInfo.longitude),
					name: this.activityInfo.location,
					address: this.activityInfo.address || this.activityInfo.location,
					fail: (err) => {
						console.error('打开导航失败:', err);
						uni.showToast({
							title: '导航失败',
							icon: 'none'
						});
					}
				});
			},
			// 检查是否是活动发布者
			checkIsCreator() {
				const userInfo = uni.getStorageSync('storage_data')?.vuex_user_info
				/* console.log('checkIsCreator', userInfo)
				console.log('checkIsCreator', this.activityInfo) */
				if (userInfo && this.activityInfo.sysUser) {
					this.isCreator = userInfo.userId === this.activityInfo.sysUser.userId
				}
			},

			// 显示管理弹出框
			showManagePopup() {
				this.showManageSheet = true
			},

			// 关闭管理弹出框
			closeManagePopup() {
				this.showManageSheet = false
			},

			// 处理管理操作
			handleManageAction(index) {
				switch (index) {
					case 0: // 编辑活动
						uni.navigateTo({
							url: `/pages/activity/edit?id=${this.activityId}`,
							fail: (err) => {
								console.error('跳转编辑页面失败:', err);
								uni.showToast({
									title: '页面跳转失败',
									icon: 'none'
								});
							}
						});
						break;
					case 1: // 开启约赛
						// TODO: 实现开启约赛功能
						break;
					case 2: // 分队
						uni.navigateTo({
							url: `/pages/activity/team-division?id=${this.activityId}`
						});
						break;
					case 3: // 联系客服
						this.handleService();
						break;
					case 4: // 战术板
						uni.navigateTo({
							url: `/pages/activity/tactics?id=${this.activityId}`
						});
						break;
					case 5: // 取消活动
						uni.showModal({
							title: '确认取消',
							content: '确定要取消该活动吗？',
							success: (res) => {
								if (res.confirm) {
									// TODO: 调用取消活动的API
									delActivity(this.activityId).then(res => {
										console.log('取消活动', res)
										if (res.code === 200) {
											uni.showToast({
												title: '取消活动成功',
												duration: 2000
											});
											uni.switchTab({
												url: '/pages/index/index'
											})
										}
									})
								}
							}
						});
						break;
					case 6: // 报名审批
						uni.navigateTo({
							url: `/pages/activity/signup-list?id=${this.activityId}&mode=approval&createUserId=${this.activityInfo.sysUser.userId}`
						});
						break;
				}
				this.closeManagePopup();
			},
			goToProfile(userId) {
				if (!userId) {
					uni.showToast({
						title: '用户信息不完整',
						icon: 'none'
					});
					return;
				}

				uni.navigateTo({
					url: `/pages/profile/detail?userId=${userId}`,
					fail: (err) => {
						console.error('跳转人主页失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			},
			makePhoneCall(phone) {
				if (!phone) {
					uni.showToast({
						title: '电话号码不存在',
						icon: 'none'
					});
					return;
				}

				uni.makePhoneCall({
					phoneNumber: phone,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败:', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},
			// 跳转到评论列表页
			goToCommentList() {
				uni.navigateTo({
					url: `/pages/activity/comment?id=${this.queryParams.activityId}`
				})
			},
			toggleMembers() {
				this.showMembers = !this.showMembers
			},
			toggleComments() {
				this.showComments = !this.showComments
			},
			goToComment() {
				uni.navigateTo({
					url: `/pages/activity/comment?id=${this.activityId}`
				})
			},
		},
		// 定义分享内容
		onShareAppMessage() {
			return {
				title: this.activityInfo.title || '邀请你参加活动',
				path: `/pages/activity/register?id=${this.activityId}`,
				imageUrl: this.activityInfo.coverImage || '/static/images/default-share.png'
			}
		},

		// 定义分享到朋友圈
		onShareTimeline() {
			return {
				title: this.activityInfo.title || '邀请你参加活动',
				query: `id=${this.activityId}`,
				imageUrl: this.activityInfo.coverImage || '/static/images/default-share.png'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		padding-bottom: 180rpx;
	}

	.club-info {
		background: #fff;
		padding: 30rpx;
		display: flex;
		align-items: center;
	}

	.club-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.club-detail {
		flex: 1;
	}

	.club-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.club-stats {
		font-size: 24rpx;
		color: #666;
	}

	.info-list {
		background: #fff;
		margin-top: 20rpx;
		padding: 0 30rpx;
	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.info-item:last-child {
		border-bottom: none;
	}

	.icon-wrap {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.icon {
		width: 100%;
		height: 100%;
	}

	.info-text {
		flex: 1;
		font-size: 28rpx;
		color: #333;
	}

	.view-count {
		font-size: 24rpx;
		color: #999;
	}

	.location-guide {
		font-size: 24rpx;
		color: #666;
	}

	.fee-status {
		font-size: 24rpx;
		color: #999;
	}

	.organizer-info {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
	}

	.organizer-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.organizer-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
		display: block;
	}

	.rating {
		display: flex;
		align-items: center;
	}

	.star {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4rpx;
	}

	.activity-desc {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.tag {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 16rpx;
		display: block;
	}

	.desc-text {
		font-size: 28rpx;
		color: #333;
		line-height: 1.5;
	}

	.register-status {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 添加点击效果 */
		position: relative;
	}

	/* 添加点击态效果 */
	.register-status:active {
		opacity: 0.7;
	}

	.status-info {
		display: flex;
		align-items: center;
	}

	.status-text {
		font-size: 28rpx;
		color: #333;
	}

	.status-divider {
		margin: 0 20rpx;
		color: #ddd;
	}

	.arrow-right {
		font-size: 40rpx;
		color: #999;
		font-weight: bold;
		line-height: 1;
	}

	.bottom-toolbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 120rpx;
		background: #fff;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	/* 添加请按钮样式 */
	.leave-btn {
		width: 120rpx;
		height: 88rpx;
		background: #999999;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		color: #fff;
		font-size: 28rpx;
	}

	.leave-btn:active {
		opacity: 0.8;
	}

	.price-btn {
		width: 100rpx;
		height: 88rpx;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 44rpx;
		margin-right: 20rpx;
	}

	.price-symbol {
		font-size: 36rpx;
		color: #666;
	}

	.register-btn {
		flex: 1;
		height: 88rpx;
		background: #ff6b35;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 32rpx;
		font-weight: bold;
		transition: all 0.3s ease;
	}

	/* 添加已注册状态的样式 */
	.register-btn.registered {
		background: #999;
		opacity: 0.8;
	}

	.bottom-tip {
		position: fixed;
		bottom: 120rpx;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 1rpx solid #eee;
		z-index: 99;
	}

	.tip-text {
		font-size: 24rpx;
		color: #666;
	}

	.follow-btn {
		font-size: 24rpx;
		color: #ff6b35;
	}

	/* 修改浮动按钮样式 */
	.float-buttons {
		position: fixed;
		right: 30rpx;
		bottom: 240rpx;
		z-index: 99;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.float-btn-wrapper {
		margin-bottom: 20rpx;
	}

	.float-btn {
		width: 100rpx;
		height: 100rpx;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	.btn-icon {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 6rpx;
	}

	.float-text {
		font-size: 20rpx;
		color: #666;
	}

	/* 确保底部提示在浮动按钮下方 */
	.bottom-tip {
		z-index: 99;
	}

	/* 添加字体图标样式 */
	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_3869446_s4qh7ygtmr.woff2') format('woff2'),
			url('//at.alicdn.com/t/font_3869446_s4qh7ygtmr.woff') format('woff'),
			url('//at.alicdn.com/t/font_3869446_s4qh7ygtmr.ttf') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 48rpx;
		font-style: normal;
		color: #FFFFFF;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.icon-wrap {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.icon {
		width: 100%;
		height: 100%;
	}

	/* 自定义弹窗样式 */
	.custom-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.modal-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.modal-content {
		position: relative;
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		overflow: hidden;
	}

	.modal-title {
		padding: 30rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.modal-body {
		padding: 0 30rpx 30rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		line-height: 1.5;
	}

	.modal-footer {
		display: flex;
		border-top: 1rpx solid #EEEEEE;
	}

	.modal-btn {
		flex: 1;
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.modal-btn.cancel {
		color: #666;
		border-right: 1rpx solid #EEEEEE;
	}

	.modal-btn.confirm {
		color: #ff6b35;
		font-weight: bold;
	}

	/* 添加满员状态按钮样式 */
	.register-btn.registered,
	.register-btn.full {
		background: #999;
		opacity: 0.8;
	}

	/* 添加人员列表样式 */
	.members-section {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		margin-bottom: 240rpx;
		/* 为底部工具栏和浮动按钮留出空间 */
	}

	.member-group {
		margin-bottom: 30rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.group-title {
			font-size: 28rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
			padding-left: 10rpx;
		}
	}

	.member-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		padding: 10rpx 0;
	}

	.member-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 120rpx;
		margin-bottom: 16rpx;
		min-height: 160rpx; // 设置最小高度，确保有足够空间显示换行的昵称
	}

	.member-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-bottom: 12rpx;
	}

	.member-name {
		font-size: 24rpx;
		color: #333;
		width: 100%;
		text-align: center;
		line-height: 1.2;
		padding: 0 8rpx;
		word-break: break-all; // 允许在任意字符间换行
		min-height: 56rpx; // 预留两行文字的高度
	}

	/* 底部占位 */
	.bottom-placeholder {
		height: 240rpx;
	}

	/* 调整浮动按钮位置，避免遮挡 */
	.float-buttons {
		bottom: 240rpx;
	}

	.view-info {
		display: flex;
		align-items: center;
	}

	.view-icon {
		width: 28rpx;
		height: 28rpx;
		margin-right: 8rpx;
	}

	.view-count {
		font-size: 24rpx;
		color: #999;
	}

	.location-info {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		flex: 1;
	}

	.location-info .value {
		flex: 1;
		color: #333;
	}

	.nav-guide {
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.nav-icon {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.nav-text {
		font-size: 24rpx;
		color: #3a86ff;
	}

	.nav-arrow {
		font-size: 32rpx;
		color: #3a86ff;
		margin-left: 4rpx;
	}

	/* 添加点击效果 */
	.location-info:active {
		opacity: 0.7;
	}

	/* 管理弹出框样式 */
	.manage-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.modal-mask {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
	}

	.manage-content {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.manage-list {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		padding: 30rpx;
		gap: 30rpx;
	}

	.manage-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.item-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 16rpx;
	}

	.item-text {
		font-size: 26rpx;
		color: #333;
	}

	.manage-cancel {
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		color: #666;
		font-size: 32rpx;
		border-top: 1rpx solid #eee;
	}

	.phone-wrapper {
		display: flex;
		align-items: center;
		margin-bottom: 8rpx;
	}

	.call-btn {
		width: 44rpx;
		height: 44rpx;
		background: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 20rpx;
		border: 1px solid #eee;
	}

	.call-btn:active {
		opacity: 0.8;
		background: #f5f5f5;
	}

	.call-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.comment-entry {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.entry-text {
			font-size: 32rpx;
			color: #333;
		}

		&:active {
			opacity: 0.7;
		}
	}
</style>